<template>
  维护 json 的工具
  <el-button type="" @click="myclear">清空数据</el-button>
  <el-button type="" @click="reset"> 重置</el-button>
  <br>
  <hr>
  <!--表单控件-->
  <nf-grid
    v-grid-drag="gridMeta"
    v-bind="gridMeta"
    :dataList="dataList"
    :selection="selection"
  >
    <!--普通字段-->
    <template #week="scope">扩展
      <span style="margin-left: 10px">{{ scope.row.week.replace('-w','年 第') + '周' }}</span>
    </template>
  </nf-grid>
  <hr>
  <help-grid-card :gridMeta="gridMeta"></help-grid-card>

</template>

<script lang="ts">
  import { defineComponent, reactive, watch, computed } from 'vue'
  // import type { DebuggerEvent, Component} from 'vue'
  import { nfGrid, nfGridSlot, createDataList } from '../../../../lib-elp/main'
  import _gridMeta from './grid.json'
  import _formMeta from '../../form/form.json'

  // help
  import { helpGridCard } from '../../../../lib-help/main'

  // 自定义指令
  import { _gridDrag } from '../../../../lib-elp/main'
 
  export default defineComponent({
    name: 'nf-helps-grid-card',
    directives: {
      gridDrag: _gridDrag
    },
    components: {
      nfGrid: nfGridSlot,
      helpGridCard
    },
    props: {
      moduleID: { // 模块ID
        type: [Number, String],
        default: 1 
      }
    },
    setup(props) {
      // console.log('读取的 json：', _gridMeta)
      const gridMeta = reactive(_gridMeta)
    
      // 设置抽屉
      const drawerInfo = reactive({
        isShow: false
      })
      
      gridMeta.gridMeta.colOrder = [ 101, 113, 105, 100, 111, 110, 114 ]

      gridMeta.modCol = (colId: string, dragInfo: any, event: any) => {
        console.log('双击控件：', colId, dragInfo, event)
        drawerInfo.isShow = true
      }

      const selection = reactive({
        dataId: '', // 单选ID number 、string
        row: {}, // 单选的数据对象 {}
        dataIds: [], // 多选ID []
        rows: [] // 多选的数据对象 []
      })

      // 根据 meta 创建表单的 model
      const _dataList = createDataList(_formMeta.itemMeta, 30).reverse()

      // if (_dataList.length > 0)
        // _dataList[0].text = 'tool 测试 aaaaaa aaaaaa aaaaaa aaaaaa'

      const dataList = reactive<Array<any>>(_dataList)
      
      // 清空数据，演示 “没有数据”
      const myclear = () => {
        dataList.length = 0
      }
      
      // 重新设置数据
      const reset = () => {
        dataList.length = 0
        dataList.push(...createDataList(_formMeta.itemMeta, 30).reverse())
      }

      return {
        reset,
        myclear,
        dataList,
        selection,
        gridMeta
      }
    }
  })

</script>